<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一个three.js文件_WebGL三维场景</title>

    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script>
    const scene = new THREE.Scene()
    const geometry = new THREE.SphereGeometry(60, 40, 40)  // 创建一个球体几何对象
    // const geometry = new THREE.BoxGeometry(50, 100, 100)  // 创建一个立方体几何对象

    /*const material = new THREE.MeshLambertMaterial({
        color: 0xff0000,
        opacity: 0.7,
        transparent: true,
        wireframe: false,
    }) // 材质对象*/

    const material = new THREE.MeshPhongMaterial({
        color: 0x0000ff,
        specular: 0x4488ee,
        shininess: 12,
    })

    const mesh = new THREE.Mesh(geometry, material) // 网格模型对象Mesh
    scene.add(mesh)

    const point = new THREE.PointLight(0xffffff)
    point.position.set(400, 200, 300)
    scene.add(point)

    const ambient = new THREE.AmbientLight(0xffffff)
    scene.add(ambient)

    const axesHelper = new THREE.AxesHelper(250)
    scene.add(axesHelper)

    const width = window.innerWidth
    const height = window.innerHeight
    const k = width / height
    const s = 300
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)
    camera.position.set(250, 300, 200)
    camera.lookAt(scene.position)

    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(width, height)
    renderer.setClearColor(0xb9d3ff, 1)
    document.body.appendChild(renderer.domElement)

    renderer.render(scene, camera)

    let T0 = new Date()

    function render() {
        const T1 = new Date()
        const t = T1 - T0
        T0 = T1
        requestAnimationFrame(render)
        renderer.render(scene, camera)
        mesh.rotateY(0.001 * t)
    }

    render()

    new THREE.OrbitControls(camera, renderer.domElement)


    // setInterval(render, 20)

</script>
</body>
</html>